<template>
    <Div class="store-list">
        <Row class="btn">
            <Button type="primary" @click="addStore"><Icon type="plus"></Icon> 添加分组</Button>
            <Button type="success" @click="addShop"><Icon type="plus"></Icon> 添加门店</Button>
        </Row>
        <Row>
            <Col :lg="8" :md="12" :sm="24" :xs="24">
                <Table :columns="group" :data="group_data" @on-row-click="rowClick"></Table>
                <Page :total="groupPage.total" :current.sync="groupPage.current" :page-size="groupPage.pageSize" show-elevator show-total class-name="page" @on-change="handleGruopPage"></Page>
            </Col>
            <Col :lg="16" :md="12" :sm="24" :xs="24">
                <Table :columns="store" :data="store_data"></Table>
                <Page :total="storePage.total" :current.sync="storePage.current" :page-size="storePage.pageSize" show-elevator show-total class-name="page" @on-change="handleStorePage"></Page>
            </Col>
        </Row>

        <Modal v-model="add_store" :mask-closable="false" title="添加分组" :transfer="false" class-name="add-store">
            <Form :model="Form" :rules="formValidate" ref="form" :label-width="80">
                <FormItem label="分组名称" prop="addStoreName">
                    <Input placeholder="输入分组名称" v-model="Form.addStoreName"></Input>
                </FormItem>
                <FormItem label="选择门店">
                    <Select label-in-value @on-change="handleAddStores">
                        <Option v-for="item in stores" :value="item.id" :label="item.store_name" :key="item.id">{{ item.store_name }}</Option>
                    </Select>
                    <!-- <Button @click="handleAddStores">添加</Button> -->
                </FormItem>
            </Form>
            <Div>
                <Table :columns="add_store_list" :data="add_store_data"></Table>
            </Div>
            <Div slot="footer">
                <Button type="primary" @click="addGroup">确认保存</Button>
            </Div>
        </Modal>
        <Modal v-model="add_shop" :mask-closable="false" title="添加门店" :transfer="false" class-name="add-shop">
            <Form :model="addStoreForm" :rules="addStoreFormValidate" ref="addStoreForm" :label-width="80">
                <FormItem label="门店名称" prop="storeName">
                    <Input placeholder="门店名称不得超过25个字符" :maxlength="25" v-model="addStoreForm.storeName"></Input>
                </FormItem>
                <FormItem label="门店编号" prop="storeNumber">
                    <Input placeholder="输入门店编号" v-model="addStoreForm.storeNumber"></Input>
                </FormItem>
                <FormItem label="选择区域" prop="storeArea">
                    <Cascader :data="city" change-on-select filterable v-model="addStoreForm.storeArea"></Cascader>
                </FormItem>
                <FormItem label="门店地址" prop="storeAddress">
                    <Input placeholder="请填写门店具体地址" v-model="addStoreForm.storeAddress"></Input>
                </FormItem>
                <FormItem label="选择分组">
                  <Select v-model.number="addStoreForm.storeGroup" placeholder="如果没有分组请先去添加">
                    <Option v-for="item in group_data" :value="item.id" :label="item.name" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="门店状态" prop="storeStatus">
                    <RadioGroup v-model="addStoreForm.storeStatus">
                        <Radio label="1">正常</Radio>
                        <Radio label="0">未营业</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <Div slot="footer">
                <Button type="primary" @click="storeSub">确认保存</Button>
            </Div>
        </Modal>
        <Modal v-model="edit_shop" :mask-closable="false" title="门店修改" :transfer="false" class-name="add-shop">
            <Form :model="editStore" :rules="editStoreValidate" ref="editStore" :label-width="80">
                <FormItem label="门店名称" prop="editStoreName">
                    <Input placeholder="门店名称不得超过25个字符" :maxlength="25" v-model="editStore.editStoreName"></Input>
                </FormItem>
                <FormItem label="门店编号" prop="editStoreId">
                    <Input placeholder="输入门店编号" v-model="editStore.editStoreId"></Input>
                </FormItem>
                <FormItem label="选择分组">
                  <Select v-model.number="editStore.editStoreGroup">
                    <Option v-for="item in group_data" :value="item.id" :label="item.name" :key="item.id">{{ item.name }}</Option>
                  </Select>
                </FormItem>
                <FormItem label="选择区域" prop="editStoreCity">
                    <Cascader :data="city" change-on-select filterable v-model="editStore.editStoreCity"></Cascader>
                </FormItem>
                <FormItem label="门店地址" prop="editStoreAddress">
                    <Input placeholder="请填写门店具体地址" v-model="editStore.editStoreAddress"></Input>
                </FormItem>
                <FormItem label="门店状态" prop="editStoreStatus">
                    <RadioGroup v-model="editStore.editStoreStatus">
                        <Radio label="1">正常</Radio>
                        <Radio label="0">未营业</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <Div slot="footer">
                <Button type="primary" @click="editStoreSubmit">确认保存</Button>
            </Div>
        </Modal>
        <Modal v-model="edit_store" :mask-closable="false" title="分组修改" :transfer="false" class-name="add-store">
            <Form :model="editForm" :rules="editFormValidate" ref="editGroup" :label-width="80">
                <FormItem label="分组名称" prop="editStoreName">
                    <Input placeholder="输入分组名称" v-model="editForm.editStoreName"></Input>
                </FormItem>
                <FormItem label="选择门店">
                    <Select label-in-value @on-change="handleEditStores">
                        <Option v-for="item in stores" :value="item.id" :label="item.store_name" :key="item.id">{{ item.store_name }}</Option>
                    </Select>
                    <!-- <Button>添加</Button> -->
                </FormItem>
            </Form>
            <Div>
                <Table :columns="edit_store_list" :data="edit_store_data"></Table>
            </Div>
            <Div slot="footer">
                <Button type="primary" @click="editGroupSubMit">确认保存</Button>
            </Div>
        </Modal>
    </Div>
</template>

<script>
import { storeInit, searchStores, addGroup, addGroupGetList, addStores, Address, editGroupSub, editStore, editStores, storeDele, storeGroupPage, searchStoresPage, handleGetStroeInit, handleGetStroePage } from '@/api/store'
import { storesInit } from '@/api/order'

export default {
    name: 'store-list',
    data() {
        return {
            add_shop: false,    // 添加门店
            add_store: false,   // 添加分组
            edit_shop: false,   // 修改门店
            edit_store: false,  // 修改分组
            noGroupId: '',
            // 修改门店的数据
            editStore: {
              id: '',
              editStoreName: '',
              editStoreId: '',
              editStoreCity: [],
              editStoreAddress: '',
              editStoreStatus: '1',
              editStoreGroup: ''
            },
            // 分组数据
            group:[
                {
                    title: '分组名称',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '门店数量',
                    align: 'center',
                    key: 'store_count'
                },
                {
                    title: '创建时间',
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '操作',
                    align: 'center',
                    render:(h,params)=>{
                      if (params.row.id !== 0) {
                        return h('Button',{
                            props:{
                                type: 'text'
                            },
                            style:{
                                color: '#ff9000'
                            },
                            on:{
                                click: () => {
                                    this.edit_store = true;
                                    this.editGroup(params);
                                }
                            }
                        },'修改')
                      }
                    }
                }
            ],
            group_data:[],
            // 门店数据
            store:[
                {
                    title: '门店编号',
                    align: 'center',
                    key: 'store_number'
                },
                {
                    title: '门店ID',
                    align: 'center',
                    key: 'id'
                },
                {
                    title: '门店名称',
                    align: 'center',
                    key: 'store_name'
                },
                {
                    title: '门店地址',
                    align: 'center',
                    key: 'store_address'
                },
                {
                    title: '添加时间',
                    align: 'center',
                    key: 'created_at'
                },
                {
                    title: '状态',
                    align: 'center',
                    key: 'store_status'
                },
                {
                    title: '终端',
                    align: 'center',
                    render: (h, params) => {
                        return h('i-button', {
                            props: {
                                type: 'text'
                            },
                            style: {
                                color: '#2d8cf0'
                            },
                            on: {
                                click: () => {
                                    this.handleGoToTerminal(params.row.id)
                                }
                            }
                        }, params.row.terminal_number)
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    render:(h,params)=>{
                        return h('Div',[
                            h('Button',{
                                props:{
                                    type: 'text'
                                },
                                style:{
                                    color: '#ff9000'
                                },
                                on:{
                                    click:()=>{
                                        this.edit_shop = true;
                                        this.editShop(params.row.id);
                                    }
                                }
                            },'修改'),
                            h('Poptip',{
                                    props: {
                                    confirm: true,
                                    title: '您确定要删除这条数据吗?',
                                    transfer: true
                                },
                                on: {
                                    'on-ok': () => {
                                        storeDele(params.row.id).then(response => {
                                            if(response.data.code === 0) {
                                              this.$Message.success(response.data.message);
                                              this.store_data.splice(params.index, 1);
                                            } else {
                                                this.$Message.error(response.data.message)
                                            }
                                        })
                                    }
                                }
                            },[
                                h('Button',{
                                        props: {
                                            type: 'text'
                                        },
                                        style: {
                                            color: '#c63232'
                                        }
                                    },'删除')
                                ])
                        ])
                    }
                }
            ],
            store_data:[],
            // 添加分组
            add_store_list:[
                {
                    title: '门店编号',
                    align: 'center',
                    key: 'value'
                },
                {
                    title: '门店名称',
                    align: 'center',
                    key: 'label'
                },
                {
                    title: '操作',
                    align: 'center',
                    render:(h,params)=>{
                        return h('Button',{
                            props:{
                                type: 'text'
                            },
                            style:{
                                color: '#c63232'
                            },
                            on:{
                                click: ()=>{
                                    this.add_store_data.splice(params.index, 1);
                                }
                            }
                            // 待添加数据
                        },'删除')
                    }
                }
            ],
            edit_store_list:[
                {
                    title: '门店编号',
                    align: 'center',
                    key: 'value'
                },
                {
                    title: '门店名称',
                    align: 'center',
                    key: 'label'
                },
                {
                    title: '操作',
                    align: 'center',
                    render:(h,params)=>{
                        return h('Button',{
                            props:{
                                type: 'text'
                            },
                            style:{
                                color: '#c63232'
                            },
                            on:{
                                click: ()=>{
                                    this.edit_store_data.splice(params.index, 1);
                                }
                            }
                            // 待添加数据
                        },'删除')
                    }
                }
            ],
            add_store_data:[],
            edit_store_data:[],
            city:[],
            groupPage: {
                pageSize: 1,
                total: 0,
                current: 1
            },
            storePage: {
                pageSize: 1,
                total: 0,
                current: 1
            },
            stores: '',
            addStores: '',
            Form: {
              addStoreName: ''
            },
            editForm: {
              editStoreName: '',
              id: ''
            },
            addStoreForm: {
              storeName: '',
              storeNumber: '',
              storeArea: [],
              storeAddress: '',
              storeStatus: '1',
              storeGroup: ''
            },
            formValidate: {
              addStoreName: [{required: true, trigger: 'blur', message: '不能为空哟~' }]
            },
            addStoreFormValidate: {
              storeName: [{ required: true, trigger: 'blur', max: 25,  message: '不能为空哟~' }],
              storeNumber: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
              storeArea: [{ required: true, trigger: 'change', message: '不能为空哟~', type: 'array' }],
              storeAddress: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
              storeGroup: [{ required: true, trigger: 'change', type: 'number', message: '不能为空哟~' }],
              storeStatus: [{ required: true, trigger: 'change', message: '不能为空哟~' }]
            },
            editStoreValidate: {
              editStoreName: [{ required: true, trigger: 'blur', max: 25,  message: '不能为空哟~' }],
              editStoreId: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
              editStoreCity: [{ required: true, trigger: 'change', message: '不能为空哟~', type: 'array' }],
              editStoreAddress: [{ required: true, trigger: 'blur', message: '不能为空哟~' }],
              editStoreGroup: [{ required: true, trigger: 'change', type: 'number', message: '不能为空哟~' }]
            },
            editFormValidate: {
              editStoreName: [{required: true, trigger: 'blur', message: '不能为空哟~' }]
            }
        }
    },
    methods: {
        init() {
            storeInit().then(response => {
              this.group_data = response.data.data.groups
              this.groupPage.total = response.data.data.total
              this.groupPage.pageSize = response.data.data.size
              this.groupPage.current = response.data.data.page
            })
            storesInit().then(response => {
              this.stores = response.data.data.stores
            })
        },
        addStore() {
            this.add_store = true;
        },
        addShop() {
            this.add_shop = true;
        },
        editShop(id) {
          editStore(id).then(response => {
            this.editStore.id = id
            this.editStore.editStoreName = response.data.data.store_name
            this.editStore.editStoreId = response.data.data.store_number
            this.editStore.editStoreCity = response.data.data.store_area
            this.editStore.editStoreAddress = response.data.data.store_address
            this.editStore.editStoreStatus = String(response.data.data.store_status)
            this.editStore.editStoreGroup = response.data.data.group_id
          })
        },
        editGroup(index) {
          addGroupGetList(index.row.id).then(response => {
            this.editForm.editStoreName = response.data.data.name
            this.editForm.id = index.row.id
            this.edit_store_data = response.data.data.stores
          })
        },
        rowClick(v) {
          if (v.id === 0) {
            this.noGroupId = v.id
            handleGetStroeInit().then(response => {
              this.store_data = response.data.data.stores
              this.storePage.total = response.data.data.total
              this.storePage.pageSize = response.data.data.size
              this.storePage.current = response.data.data.page
            })
          } else {
            searchStores(v.id).then(response => {
              this.noGroupId = v.id
              this.store_data = response.data.data.stores
              this.storePage.total = response.data.data.total
              this.storePage.pageSize = response.data.data.size
              this.storePage.current = response.data.data.page
            })
          }
        },
        addGroup() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    const value = []
                    for(let id in this.add_store_data) {
                      value.push(this.add_store_data[id].value)
                    }
                    addGroup(this.Form.addStoreName, value).then(response => {
                      if (response.data.code === 0) {
                          this.$Message.success(response.data.message)
                          this.add_store_data = []
                          this.Form.addStoreName = ''
                          this.add_store = false
                          storeInit().then(response => {
                            this.group_data = response.data.data.groups
                            this.groupPage.total = response.data.data.total
                            this.groupPage.pageSize = response.data.data.size
                          })
                      } else {
                        this.$Message.error(response.data.message)
                      }
                    })
                }
            })
        },
        handleAddStores(v) {
            if (JSON.stringify(this.add_store_data).indexOf(JSON.stringify(v)) !== -1) {
                    this.$Message.error('该门店已添加')
            } else {
                    this.add_store_data.push(v)
            }
        },
        storeSub() {
            this.$refs['addStoreForm'].validate((valid) => {
                if (valid) {
                    addStores(this.addStoreForm).then(response => {
                        if (response.data.code === 0) {
                          this.$Message.success(response.data.message)
                          this.$refs['addStoreForm'].resetFields();
                          this.add_shop = false
                        }
                    })
                } else {
                    this.$Message.error('请认真填写门店数据哟~')
                }
            })
        },
        editGroupSubMit() {
          this.$refs['editGroup'].validate((valid) => {
            if (valid) {
              const value = []
              for(let id in this.edit_store_data) {
                value.push(this.edit_store_data[id].value)
              }
              editGroupSub(this.editForm.id, this.editForm.editStoreName, value).then(response => {
                if (response.data.code === 0) {
                  this.$Message.success(response.data.message)
                  this.$refs['editGroup'].resetFields()
                  this.editForm.id = ''
                  this.init()
                  this.edit_store = false
                } else {
                  this.$Message.error(response.data.message)
                  this.edit_store = false
                }
              })
            }
          })
        },
        handleEditStores(v) {
            if (JSON.stringify(this.edit_store_data).indexOf(JSON.stringify(v)) !== -1) {
                    this.$Message.error('该门店已添加')
            } else {
                    this.edit_store_data.push(v)
            }
        },
        editStoreSubmit() {
          this.$refs['editStore'].validate((valid) => {
                if (valid) {
                    editStores(this.editStore.id, this.editStore).then(response => {
                        if (response.data.code === 0) {
                            this.$Message.success(response.data.message)
                            this.$refs['editStore'].resetFields();
                            this.init()
                            this.edit_shop = false
                        } else {
                          this.$Message.error(response.data.message)
                        }
                    })
                } else {
                    this.$Message.error('请认真填写门店数据哟~')
                }
            })
        },
        handleGruopPage(v) {
          storeGroupPage(v).then(response => {
            this.group_data = response.data.data.groups
          })
        },
        handleStorePage(v) {
          if (this.noGroupId === 0) {
            handleGetStroePage(v).then(response => {
              this.store_data = response.data.data.stores
            })
          } else {
            searchStoresPage(this.noGroupId, v).then(response => {
              this.store_data = response.data.data.stores
            })
          }
        },
        handleGoToTerminal(id) {
            this.$router.push({ name: 'terminal', query: { store_id: id }})
        }
    },
    created() {
        this.init()
        Address().then(response => {
          this.city = response.data
        })
    }
}
</script>

<style scoped lang="less">
    @import 'store.less';
</style>
